<template>
     <!-- 此处要复用 -->
     <div class="box">
        <div class = "Oder-Item"  v-for="item in oder" :key="item.length" >
            <div class="header">
                <div class="logo"><img src="" alt="">
                <img :src="require('../assets/MineALL/vialogo.jpg')" alt="">
                </div>
                <p class="brand">轩逸自营</p>
                <p class="state">已收货</p>
            </div>
            <div class="main">
                <!-- 此处要复用 -->
                <div class="goods"  v-for="index in oder[item.id].goods" :key="index.length">
                    <div class="goodsimg">
                        <img :src="require('../assets/MineALL/vialogo.jpg')" alt="">
                    </div>
                    <div class="goodsinfo1">
                        <div class="goodsheadline">
                            <span class="goodsheadline1">{{index.goodsheadline}}</span>
                            <span class="goodsprice">{{index.goodsprice}}</span>
                        </div>
                        <div class="goodsdescribe">
                            <span class="goodsdescribe1">{{index.goodsdescribe}}
                            </span>
                            <span class="goodsnum">{{index.goodsnum}}</span>
                        </div>
                    </div>
                </div>
                <div class="OderInfo">
                    <p class="total">{{item.oderinfo.allnum}}件：￥{{item.oderinfo.total}}</p>
                    <p class="rest">含运费 ￥{{item.oderinfo.rest}}</p>
                </div>
            </div>
            <div class="footer">
                <span>删除订单</span>
                <a href="#" @click="handleClick">
                <div class="again" >查看订单</div>
                </a>
            </div>
        </div>
    </div>
</template>
<script>
let oderdata = [{id:0,goods:[{goodsheadline:"1h床垫",goodsprice:"1799.00", goodsdescribe:"布拉格灰  布拉格灰布拉格灰 180*200*18cm",goodsnum:"x1",},
                       {goodsheadline:"2h床垫",goodsprice:"2799.00", goodsdescribe:"布拉格灰  布拉格灰布拉格灰 180*200*18cm",goodsnum:"x1",}]
                ,oderinfo:{allnum:"1",total:"￥2799.00",rest:"10：00"}
                },
                {id:1,goods:[{goodsheadline:"3h床垫",goodsprice:"3799.00", goodsdescribe:"布拉格灰  布拉格灰布拉格灰 180*200*18cm",goodsnum:"x1",},
                       {goodsheadline:"4h床垫",goodsprice:"4799.00", goodsdescribe:"布拉格灰  布拉格灰布拉格灰 180*200*18cm",goodsnum:"x1",}]
                ,oderinfo:{allnum:"1",total:"￥2799.00",rest:"15：00"}
                },
                {id:2,goods:[{goodsheadline:"3h床垫",goodsprice:"3799.00", goodsdescribe:"布拉格灰  布拉格灰布拉格灰 180*200*18cm",goodsnum:"x1",},
                       {goodsheadline:"4h床垫",goodsprice:"4799.00", goodsdescribe:"布拉格灰  布拉格灰布拉格灰 180*200*18cm",goodsnum:"x1",}]
                ,oderinfo:{allnum:"1",total:"￥2799.00",rest:"20：00"}
                }
                ];
export default {
    data () {
        return {
            oder:oderdata,
        }
    },
    methods: {
      handleClick(event) {
        console.log(haha );
      }
    }


}
</script>
<style lang="less">
    .Oder-Item{
        width: 92%;
        margin: .25rem auto;
        background-color:white;
        border-radius: .4rem;
        .header{
            height: 1rem;
            padding-top: .1rem;
            width: 100%;
            .logo{
                float: left;
                width: .5rem;
                margin: 0.2rem .3rem;
                img{
                    width: 100%;
                    height: auto;
                }
            }
            .brand{
                line-height: 1rem;
                font-size: .5rem;
                font-weight: bold;
                float: left;
            }
            .state{
                line-height: 1rem;
                font-size: .5rem;
                font-weight: bold;
                float: right;
                color: red;
                margin: 0 .3rem;
            }
        }
        .main{
            //  border:1px solid black;
                .goods{
                    padding-top: .4rem;
                    margin: 0 .3rem;
                    display: flex;
                    .goodsimg{
                    width: 1.6rem;
                    height: 1.6rem;
                    border-radius: .2rem;
                    overflow: hidden;
                    flex-shrink: 0;
                    img{
                        width: 100%;
                        height: auto;
                    }
                }
                .goodsinfo1{
                    width:100%;
                    border-radius: .4rem;
                    .goodsheadline{
                        display: flex;
                        justify-content: space-between;
                        .goodsheadline1{
                            font-size: .5rem; 
                            padding-left: .3rem;
                        }
                        .goodsprice{
                            font-size: .5rem;
                            color: #a9a9a9;
                        }
                    }
                    .goodsdescribe{
                        margin-top: .2rem;
                        display: flex;
                        justify-content: space-between;
                        .goodsdescribe1{
                            color: #a9a9a9;
                            padding-left: .3rem;
                        }
                        .goodsnum{
                            color: #a9a9a9;
                        }
                    }
                }
            }
            .OderInfo{
                text-align: right;
                padding-right: .4rem;
            }
        }
        .footer{
            display: flex;
            justify-content: space-between;
            span{
                font-size: .4rem;
                 margin: .4rem;
                 color: #a9a9a9;
            }
            .again{
                font-size: .4rem;
                background-color: white;
                border: 1px solid red;
                color: red;
                padding: .125rem .1875rem;
                margin: .4rem .4rem .2rem;
                border-radius: .4rem;
            }

        }
        
    }

</style>